<template>
  <view class="page">
    <Header></Header>
    <view class="main_container">
      <view class="main_content">
        <Breadcrumb :text="'个人评测-课堂作业-句子跟读'"> </Breadcrumb>
        <view class="content">
          <SpokenPractice
            ref="spokenPractice"
            v-if="componentKey > 0"
            :bookName="bookName"
            :chapterName="chapterName"
            :sentence="sentence"
            :sentenceSort="sentenceSort"
            :sentenceNum="sentenceNum"
            :key="componentKey"
            @change="sentenceChange"
            @save="handleSaveRecord"
          ></SpokenPractice>
        </view>
      </view>
    </view>
    <u-mask :show="isShowPopup" :zoom="false">
      <view class="popup_container">
        <view class="popup_img">
          <image
            src="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/app/laugh.png"
            mode="widthFix"
          ></image>
        </view>
        <view class="popup_txt" v-if="hasGold">
          恭喜你！本单元课堂作业已完成。奖励你{{ goldNum }}个金币
        </view>
        <view class="popup_txt" v-else> 恭喜你！本单元课堂作业已完成。 </view>
        <view class="popup_button">
          <view class="popup_button_content" @click="handleReport()"
            ><text>作答报告</text></view
          >
          <view class="popup_button_content active" @click="handleBack()"
            ><text>返回</text></view
          >
        </view>
      </view>
    </u-mask>
  </view>
</template>

<script>
import { findSpokenSentence, classworkSpokenSave } from "@/api/classWork";
export default {
  components: {},
  data() {
    return {
      chapterId: "",
      bookName: "",
      chapterName: "",
      sentence: null,
      sentenceSort: 0,
      sentenceNum: 0,
      componentKey: 0,
      endFlag: false,
      hasGold: true,
      goldNum: 0,
      isShowPopup: false,
    };
  },
  onLoad(option) {
    this.chapterId = option.chapterId;
    this.init();
  },
  methods: {
    init() {
      //default
      this.sentenceChange();
    },
    sentenceChange() {
      this.getSentence().then(() => {
        this.componentKey += 1;
      });
    },
    async getSentence() {
      let params = {
        id: this.chapterId,
      };
      await findSpokenSentence(params).then((res) => {
        let bookInfo = res.data.bookChapter;
        this.bookName = bookInfo.bookEdition + bookInfo.bookYear;
        this.chapterName = bookInfo.shortName;
        this.sentence = res.data.sentence;
        this.sentenceSort = res.data.sentenceSort;
        this.sentenceNum = res.data.sentenceNum;
      });
    },
    handleSaveRecord(flag, score, list) {
      let params = {
        chapterId: this.chapterId,
        sentenceId: this.sentence.id,
        improveContent: list.toString(),
        accuracyScore: score,
      };
      classworkSpokenSave(params).then((res) => {
        this.endFlag = res.data.endFlag;
        this.$refs.spokenPractice.handleSaveData(res.data.endFlag);
        if (this.endFlag) {
          this.hasGold = res.data.hasGold;
          this.goldNum = res.data.goldNum;
          this.isShowPopup = true;
        }
      });
    },
    handleReport() {
      uni.redirectTo({
        url: `/pages/classWork/classWorkReport?chapterId=${this.chapterId}&type=5`,
      });
    },
    handleBack() {
      uni.redirectTo({
        url: "/pages/classWork/classWork",
      });
    },
  },
};
</script>

<style lang="scss" scoped>
@import "./classWorkSpokenDetail";
</style>
